<template>
    <Modal
            width="400"
            v-model="visible"
            :title="title"
            @on-cancel="cancel"
            :key="modalKey"
    >
        <Spin size="large" fix v-if="Loading"></Spin>
        <Form ref="model" :model="model" :rules="ruleInline">
            <FormItem prop="username">
                <Row>
                    <i-col span="24">
                        用户手机号：<span style="color: red">{{mobile}}</span>
                    </i-col>
                </Row>
            </FormItem>
            <FormItem prop="code">
                <Row>
                    <i-col span="15">
                        <Input type="text" v-model="model.code" placeholder="请输入短信验证码">
                        <Icon type="ios-phone-portrait" slot="prepend"/>
                        </Input>
                    </i-col>
                    <i-col span="3">
                        <Button type="primary" @click="sendMessage" v-if="canSendMessage">获取短信验证码</Button>
                        <Button type="primary" disabled v-else>重新发送{{times}}s</Button>
                    </i-col>
                    <div class="ivu-form-item-error-tip" v-if="errorMobile">手机号码格式不正确</div>
                </Row>
            </FormItem>
        </Form>
        <div slot="footer">
            <template>
                <Button type="primary" @click="ok">确定</Button>
            </template>
        </div>
    </Modal>

</template>

<script>
    import {postAction, getAction} from '@/api/request'
    import cookie from 'js-cookie'

    export default {
        name: "login-send-message",
        data() {
            return {
                title: "实名认证短信登录",
                visible: false,
                disableSubmit: false,
                model: {},
                message: {},
                mobile: "",
                key: "",
                times: 60,
                canSendMessage: true,
                errorMobile: false,
                modalKey: "",
                Loading: false,
                ruleInline: {
                    code: [
                        {required: true, message: '短信验证码不能为空', trigger: 'blur'},
                    ]
                },
                url: {
                    sendMessage: "/api/ac/subsistence/messageLoginServiceImpl/sendMessage",
                    checkMessage: "/api/ac/subsistence/messageLoginServiceImpl/checkMessage",
                    checkNeedMessage: "/api/ac/subsistence/messageLoginServiceImpl/checkNeedMessage"
                }
            }
        },
        methods: {
            edit(message, key) {
                this.model = {};
                if (message.mobile && message.mobile.length > 7) {
                    this.mobile = message.mobile.substring(0, 7) + "****";
                }
                this.key = key;
                this.message = message;
                this.checkNeedMessage(key, message.id);
            },

            checkNeedMessage(key, id) {
                postAction(this.url.checkNeedMessage, {userId: id}).then((res) => {
                    let data = res.data;
                    if (data.errcode === 0) {
                        if (data.data) {
                            this.visible = true;
                        } else {
                            this.setCookie();
                        }
                    } else {
                        this.$Message.error(data.errmsg);
                        this.$emit('ok');
                    }
                })
            },

            sendMessage() {
                var mobile = this.message.mobile;
                var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                var result = false;
                if (myreg.test(mobile)) {
                    result = true;
                }
                this.errorMobile = !result;
                if (result) {
                    this.setTime();
                    postAction(this.url.sendMessage, {mobile: mobile}).then((res) => {
                        let data = res.data;
                        if (data.errcode === 0) {
                            this.$Message.success("发送成功!")
                        } else {
                            this.$Message.error(data.errmsg)
                            this.$emit('ok');
                        }
                    })
                }
            },
            setTime() {
                this.canSendMessage = false;
                this.timer = setInterval(() => {
                    this.times--
                    if (this.times === 0) {
                        this.canSendMessage = true
                        clearInterval(this.timer)
                    }
                }, 1000)
            },
            cancel() {
                clearInterval(this.timer);
                this.times = 60;
                this.canSendMessage = true;
            },
            ok() {
                this.errorMobile = false;
                this.$refs['model'].validate((valid) => {
                    if (valid) {
                        this.Loading = true;
                        let param = {};
                        param.code = this.model.code;
                        param.mobile = this.message.mobile;
                        postAction(this.url.checkMessage, param).then((res) => {
                            let data = res.data;
                            if (data.errcode === 0) {
                                this.visible = false;
                                this.Loading = false;
                                this.setCookie();
                            } else {
                                this.$Message.error(data.errmsg)
                            }
                        }).finally(() => {
                            this.$emit('ok');
                            this.Loading = false;
                        });
                    }
                })
            },
            setCookie() {
                cookie.set("setSeverUserInfo", this.message);
                cookie.set("token", this.key);
                setTimeout(() => {
                    this.$router.push({
                        name: this.$config.homeName
                    });
                }, 500);
            }
        }
    }
</script>

<style scoped>

</style>